<template>
  <div>
  	<a-form class="mb-20 justify-end" :model="_d.form" ref="formRef" layout="inline">
			<a-form-item name="title" label="计划名称">
	      <a-input v-model:value="_d.form.title" placeholder="请输入计划名称" allowClear></a-input>
	    </a-form-item>
		  <a-form-item>
	    	<a-space>
	    		<a-button @click="() => formRef.resetFields()">重置</a-button>
	    		<a-button type="primary" @click="search">查询</a-button>
	    		<a-button type="primary" @click="showData()">新增</a-button>
	    	</a-space>
	    </a-form-item>
		</a-form>
		<a-table bordered :columns="_d.table.head" :data-source="_d.table.data" :pagination="_d.paging" :loading="_d.table.loading">
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex == 'actions'">
					<a-space>
						<a-button class="p-0" type="link" @click="showDetail(record)">详情</a-button>
						<a-button class="p-0" type="link" @click="showData(record)">编辑</a-button>
					</a-space>
				</template>
			</template>
		</a-table>
  </div>
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import {useRouter} from "vue-router"
	// import {list} from "@/api/user.js"

	const router = useRouter();

	const formRef = ref();

	const _d = reactive({
		form: {
			title: '',
		},

		table: {
			loading: false,
			head: [
				{title: '文章名称', dataIndex: 'title'},
				{title: '文章状态', dataIndex: 'status', align: 'center', width: 150},
				{title: '操作', dataIndex: 'actions', align: 'center', width: 150}
			],
			data: [
				{title: '这是一个测试文章', status: '已发布'},
				{title: '这是一个测试文章', status: '未发布'},
				{title: '这是一个测试文章', status: '已作废'}
			]
		},

		paging: {
			current: 1,
			pageSize: 10,
			total: 0,
			showSizeChanger: true,
			pageSizeOptions: ['10', '20', '50', '100'],
			showTotal: (total) => `共 ${total} 条`,
			onChange (current, pageSize) {
				this.current = current;
				this.pageSize = pageSize;
				_d.form.pageCurrent = current
				_d.form.pageRows = pageSize
				getData();
			}
		},
	})

	onMounted(() => {
		search();
	})

	function search() {
		_d.paging.current = 1;
		// getData();
	}

	function getData() {
		_d.table.loading = true;
		list(_d.form).then(res => {
			_d.paging.total = res.rowSum;
			_d.table.data = res.rowDatas;
		}).finally(() => {
			_d.table.loading = false;
		})
	}

	function showData() {
		router.push({
			path: '/article/data'
		})
	}

	// 显示详情
	function showDetail(record) {
		router.push({
			path: '/article/info'
		})
	}

</script>

<style scoped>

</style>